<template>
	<div class="help-box">
		<div class="search">
			<van-search
				shape="round"
				@input="input"
				@search="search"
				@clear="showSearch = false"
				v-model="searchVal"
				placeholder="请输入搜索关键词"
			/>
		</div>
		<div class="help">
			<div class="search-re" v-if="showSearch">
				<div class="re-title">
					搜索结果
				</div>
				<div class="re-cell">
					<div class="re-cell-item" v-for="(issue, issuei) in searchList" :key="issuei" @click="issueDetail(issuei)">
						<van-icon size="20" color="#B2B2B2" name="search" />
						<div class="re-cell-item-t">
							{{ issue.title }}
						</div>
					</div>
					<div class="re-cell-empty" v-if="searchList.length == 0">
						没有找到相关问题哦~
					</div>
				</div>
			</div>
			<van-sidebar v-model="activeKey">
				<van-sidebar-item v-for="(item, index) in list" :key="index" :title="item.name" />
			</van-sidebar>
			<div class="help-item ">
				<!-- <div class="hot van-hairline--right" @click="issueList(index)">
				<svg-icon class="icon" :iconName="item.icon"></svg-icon>
				<div class="icon">
					<img :src="item.icon" alt="" />
				</div>
				{{ item.name }}
			</div> -->

				<div class="cell">
					<van-cell
						:title="issue.title"
						v-for="(issue, issuei) in list[activeKey] ? list[activeKey].issueList : 0"
						:key="issuei"
						@click="issueDetail(issuei)"
						is-link
						:border="false"
					/>
				</div>
			</div>
		</div>

		<div class="link-serve">
			<div class="link-serve-btn" @click="$router.push('/member-service')">
				联系客服
			</div>
		</div>
	</div>
</template>
<script>
import { Sidebar, SidebarItem, Search } from 'vant';
export default {
	data() {
		return {
			activeKey: 0,
			list: [],
			searchVal: '',
			searchList: [],
			showSearch: false,
			listIndex: 0
		};
	},
	components: {
		'van-sidebar': Sidebar,
		'van-sidebar-item': SidebarItem,
		'van-search': Search
	},
	mounted() {
		// setTimeout(() => {
		// 	this.loading = false;
		// 	this.testList = this.list;
		// }, 300);
		this.$service.member.faq
			.page({
				app: 'yzf'
			})
			.then(res => {
				this.list = res.map((item, index) => {
					if (this.$route.query.id) {
						if (item.id == Number(this.$route.query.id)) {
							this.activeKey = index;
						}
					}

					return {
						...item,
						issueList: item.list
					};
				});
			});
	},
	methods: {
		input(val) {
			console.log(val);
			if (val === '') {
				this.showSearch = false;
			}
		},
		search(val) {
			console.log(val);
			if (val == '') {
				return;
			}
			this.$service.member.faq
				.page({
					app: 'yzf',
					keyWord: val
				})
				.then(res => {
					console.log(res);
					this.showSearch = true;
					this.searchList = res;
					// this.list = res.map(item => {
					// 	return {
					// 		...item,
					// 		issueList: item.list
					// 	};
					// });
				});
		},
		issueList(index) {
			// console.log(index);
			this.$router.push('/member-help-list?id=' + index);
		},
		issueDetail(id) {
			console.log(id);
			console.log(this.list[this.activeKey].issueList[id]);
			let detail = this.list[this.activeKey].issueList[id];
			this.$router.push('/member-help-detail?title=' + detail.title + '&content=' + detail.content);
		}
	}
};
</script>
<style lang="scss" scoped>
.search {
	height: 110px;
	background: rgba(246, 246, 246, 1);
	border-radius: 32px;
}
.help {
	display: flex;
	position: relative;
	.search-re {
		position: absolute;
		background-color: #ffffff;
		min-height: calc(100vh - 110px);
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		padding-left: 40px;
		.re-title {
			height: 40px;
			font-size: 28px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 40px;
			color: rgba(23, 23, 23, 1);
			margin-top: 20px;
		}
		.re-cell {
			margin-top: 20px;
			.re-cell-item {
				height: 80px;
				background: rgba(255, 255, 255, 1);
				display: flex;
				align-items: center;
				font-size: 28px;
				font-weight: 400;
				color: #3b3b3b;
				.re-cell-item-t {
					margin-left: 24px;
				}
			}
			.re-cell-empty {
				color: #cccccc;
				text-align: center;
				font-size: 28px;
				margin-top: 50px;
			}
		}
	}
	.help-item {
		display: flex;
		padding-bottom: 170px;
		// margin-left: 13px;
		background-color: #ffffff;
		width: 100%;
		.hot {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 158px;

			justify-content: center;
			font-size: 28px;
		}
		.cell {
			flex: 1;
			padding: 0 15px 0 20px;
		}
	}
}
.skeleton {
	width: 100%;
	height: 276px;
	margin-top: 20px;
}
>>> .van-skeleton__avatar {
	margin-top: 50px;
}
/deep/ .van-sidebar-item--select {
	border-color: transparent;
}
/deep/ .van-cell {
	border-bottom: 2px solid rgba(243, 244, 246, 1);
}
/deep/ .van-sidebar-item {
	position: relative;
	width: 182px;
	height: 108px;
	line-height: 68px;
	border-width: 0;
	padding: 20px 12px 20px 18px;
}
/deep/ .van-sidebar-item--select::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 16px;
	background-color: #ee0a24;
	width: 8px;
	height: 82px;
	background: rgba(247, 1, 20, 1);
	opacity: 1;
	border-radius: 4px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	content: '';
}
/deep/ .van-sidebar {
	min-height: calc(100vh - 110px);
	background-color: #fafafa;
	width: 180px;
}
.link-serve {
	// width: 100%;
	height: 128px;
	line-height: 128px;
	text-align: center;
	@include flexBox(center, center);
	position: fixed;
	bottom: 0;
	width: 750px;
	height: 104px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.16);
	.link-serve-btn {
		width: 336px;
		height: 80px;
		line-height: 80px;
		background: rgba(247, 1, 20, 1);
		border-radius: 40px;
		font-size: 28px;
		color: #ffffff;
	}
}
@supports (bottom: env(safe-area-inset-bottom)) {
	.link-serve {
		padding-bottom: env(safe-area-inset-bottom);
	}
}
</style>
